<div [ngClass]="{'opp':treeopp}"></div>
<button type="button" class="btn btn-default btn-md popup-btn popup-btn-hide animate-time" [ngClass]="{'popup-btn-show':step==2}">
    <span class="glyphicon glyphicon-plus"></span>新增
    <img class="gesture-img" src="assets/right-product/guide/hand.png" />
</button>
<!-- 引导框 -->
<div class="guide animate-time" [ngClass]="{'hide':step==0, 'guide-two':step==2 || step==3 ||step==4 ||step==5}">
    <div class="guide-left">
        <img class="arrow hide" [ngClass]="{'show':step==2||step==3||step==4}" src="assets/right-product/guide/arrow.png" />
        <img class="arrow hide" [ngClass]="{'show':step==1}" src="assets/right-product/guide/arrow2.png" />
    </div>
    <div class="guide-right">
        <div class="guide-right-top">
            <img class="left diagram" src="assets/right-product/guide/house.png" />
            <span class="left yellow-font">创建子机构第{{step}}步 :</span>
            <span class="left">{{title}}</span>
        </div>
        <div class="guide-right-bottom">
            <div class="left spot">
                <span [ngClass]="{'active':step==1||step==2||step==3||step==4||step==5}"></span>
                <span [ngClass]="{'active':step==2||step==3||step==4||step==5}"></span>
                <span [ngClass]="{'active':step==3||step==4||step==5}"></span>
                <span [ngClass]="{'active':step==4||step==5}"></span>
                <span [ngClass]="{'active':step==5}"></span>
            </div>
            <div class="left">
                <button class="btn btn-primary next-btn" type="button" [disabled]="isbtn == false" (click)="nextStep()">{{btn}}</button>
                <span class="out-btn" (click)="exitBoot()">退出引导</span>
            </div>
        </div>
    </div>
</div>
<!-- 引导框 end -->
<div class="tree-contain animate-time" [ngClass]="{'right-full':isActive, 'right-off':!isActive ,'z-9999':step==1}">
    <div class="tree-contain-padding">
        <ul class="breadcrumb">
            <li>
                <strong>机构目录</strong>
            </li>
        </ul>
        <div class="tree-box">
            <!-- <p class="mogami" (click) = "mogami()">
                <span>最上级</span>
            </p> -->
            <!-- <p-tree [style]="{width:'100%', marginBottom: '20px'}" [value]="treeData" selectionMode="single" ></p-tree> -->
            <p-tree class="tree-public" [value]="treeData" selectionMode="multiple" [(selection)]="selectedFiles" (onNodeSelect)="nodeSelect($event)"
                (onNodeUnselect)="nodeUnselect($event)">
            </p-tree>
        </div>
    </div>
</div>



<!-- contain BEGIN -->
<div class="has-tree right-product right-full animate-time " [ngClass]="{ 'right-full': isActive , 'right-off': !isActive }">

    <div class="list-contain center-back right-back">

        <app-breadcrumb [breadcrumbInfo]="{ 'secondLevel' : '用户管理', 'threeLevel' : '机构管理' }"></app-breadcrumb>

        <div class="container-fluid institution-container-fluid">
            <div class="info-center">
                <!-- 操作 BEGIN -->
                <div class="button-group hover-search">
                    <button type="button" class="btn btn-default btn-md" [disabled]="!disableadd" (click)="add()" *ngIf="right['institution']['create']">
                        <span class="glyphicon glyphicon-plus"></span>
                        新增
                    </button>
                    <button type="button" class="btn btn-default btn-md yellow" data-target="#delete" data-toggle="modal" [disabled]="seletedIds?.length == 0" *ngIf="right['institution']['batchDelete']">
                    <!-- (click)="deletes()" *ngIf="right['institution']['batchDelete']"> -->
                        <span class="glyphicon glyphicon-trash"></span>
                        批量删除
                    </button>
                    <button type="button" class="btn btn-default btn-md " (click)="enable(1)"  [disabled]="seletedIds?.length == 0" *ngIf="right['institution']['batchEnable']">
                     <!-- ng-mousedown="getDataID()" ng-click="enable()" *ngIf="right['institution']['batchEnable']"> -->
                        <span class="glyphicon glyphicon-ok-circle"></span>
                        批量启用
                    </button>
                    <button type="button" class="btn btn-default btn-md redbtn" (click)="enable(0)" [disabled]="seletedIds?.length == 0" *ngIf="right['institution']['batchDisable']">
                    <!-- (click)="disable()"> -->
                        <span class="glyphicon glyphicon-ban-circle"></span>
                        批量禁用
                    </button>

                    <!-- search BEGIN -->
                    <div class="input-group pull-right search-width mr-10" *ngIf="right['institution']['query']">
                        <input type="text" class="form-control search-input" placeholder="请输入机构名称搜索" [(ngModel)]="queryCriteria" (input)="changesearch()" (keyup.enter)="changesearch()">
                        <span class="input-group-addon search-btn" (click)="search()">
                            <img src="assets/right-product/search.png">检索
                        </span>
                    </div>
                    <!-- search END -->

                </div>
                <!-- 操作 END -->
                <!-- 角色组列表内容 BEGIN -->
                <div class="contain">


                    <div class="clearfix"></div>

                    <!-- 表格内容 BEGIN -->
                    <app-institution-table #table 
                                           [tableNumber]="tableNumber" 
                                           (tabeListOutput)="ParentList($event)" 
                                           (detailsOutput)="ParentDetails($event)"
                                           >
                    </app-institution-table>
                    <!-- 表格内容 END -->

                </div>
                <!-- 角色组列表内容 BEGIN -->


            </div>
          
            <app-pagination [getTotalItems]="totalItems" (isLoadTableFromPagination)="isLoadTableFromPaginationHandler($event)"></app-pagination>

        </div>
    </div>
</div>
<!-- contain END -->

<app-institution-disable></app-institution-disable>
<!-- 新增 BEGIN -->
<app-institution-add        (addstepOutput)="stepadd($event)"  (addOutput)="ParentAdd($event)" [superiorAdd]="superior" [superiorAddId]="superioraddId"></app-institution-add>
<app-institution-add-admin  (addstepOutput)="stepadd($event)"  (addOutput)="ParentAdd($event)" [superiorAdd]="superior" [superiorAddId]="superioraddId"></app-institution-add-admin>
<app-institution-add-ip     (addstepOutput)="stepadd($event)"  (addOutput)="ParentAdd($event)" [superiorAdd]="superior" [superiorAddId]="superioraddId"></app-institution-add-ip>
<!-- 新增 END -->

<!-- 批量删除 BEGIN -->
<app-institution-delete (deleteOutput)="ParentDelete($event)" [selectedIds]="seletedIds" [treeData]="treeData" [selectedFiles]="selectedFiles" ></app-institution-delete>
<!-- 批量删除 END -->

<app-institution-of [superiorofId]="superioraddId"></app-institution-of>
<!-- 详情 BEGIN -->
<app-institution-details [getTabVal]="tabVal" [superiorDetails]="superior"></app-institution-details>
<!-- 详情 END -->

<!-- 编辑 BEGIN -->
<app-institution-update  [getTabVal]="tabVal" (updateOutput)="ParentUpdate($event)" [superiorUpdate]="superior" [superiorUpdateId]="superioraddId"></app-institution-update>
<!-- 编辑 END -->
